<!--
 * @Author: cjy
 * @Date: 2023-05-18 13:41:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-05-18 14:17:12
 * @Descripttion: 
 * @FilePath: \vue-openlayers-demos\src\views\tileCancle\TileCancle.vue
-->
<template>
    <div class="vm">
      <h2 class="h-title">加载切片超时取消请求</h2>
      <div id="map" class="map-x"></div>
    </div>
  </template>
  
  <script>
  import 'ol/ol.css'
  import { Map, View } from 'ol'
  import Tile from 'ol/layer/Tile'
  import XYZ from 'ol/source/XYZ'
  import * as control from 'ol/control'
  
  export default {
    name: 'FirstMap',
    data () {
      return {
        map: null
      }
    },
    methods: {
      initMap () {
        this.map = new Map({
          controls: control.defaults({ zoom: false}),
          target: "map", 
          layers: [ 
            new Tile({
              source: new XYZ({ //http://t0.tianditu.gov.cn/img_c/wmts
              //   url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
                url: 'http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
                projection: "EPSG:4326",
                tileLoadFunction: function(tile, src) {
                  var tileRequest = new XMLHttpRequest();
                  tileRequest.open('GET', src, true);
                  tileRequest.timeout = 1000; // 设置超时时间为5秒
                  tileRequest.onload = function() {
                    tile.getImage().src = src;
                  };
                  tileRequest.ontimeout = function() {
                    console.log('Tile load timeout');
                    tileRequest.abort(); // 超时后取消请求
                  };
                  tileRequest.send();
                }
              }),
            }),
            // new Tile({
            //   source: new XYZ({
            //     url: 'http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
            //     projection: "EPSG:4326",
            //   })
            // })
        
          ],
          view: new View({ 
            projection: "EPSG:4326",
            center: [110.064839, 32.548857], 
            // minZoom:10, 
            zoom: 5 
          })
        })
      },
  
  
  
  
  
    },
    mounted () {
      this.initMap();
  
  
    }
  }
  </script>
  
  <style lang="scss" scoped>
    
  </style>